<!-- components/Account.vue -->
<template>
	<view class="container">
		<!-- 标题 -->
		<!-- <CustomNavbar title="确认订单" /> -->
		<view class="content">
			<view class="address-wrapper flex-between" @click="toAddress">
				<!-- 信息 -->
				<view class="address_icon" v-if="!address">
					<image src="/orderPages/static/address.png" mode=""></image>
					<view class="p">去添加地址</view>
				</view>
				<view class="info-address" v-else>
					<view class="info">
						<text class="name">{{infos?.delivery_name}}</text>
						<text>{{infos?.delivery_phone}}</text>
					</view>
					<text class="address">{{infos?.delivery_address}}</text>
				</view>
				<view class="right">
					<image src="/orderPages/static/address_right.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="goods flex-between">
				<image src="/static/index_slices/goods2.png" mode="widthFix"></image>
				<view class="goods-detail">
					<h4>{{infos?.goods_name}}</h4>
					<view class="num">
						<text class="num">默认</text>
					</view>
					<view class="flex-between">
						<view class="price-box">
							<text>￥</text>
							<text class="price">{{infos?.goods_price}}</text>
						</view>
						<text>X{{infos?.order_num}}</text>
					</view>
				</view>
			</view>
			<!-- 合计 -->
			<view class="total-amount">
				<view class="flex-between item">
					<text>发货方式</text>
					<view class="flex">
						<view class="fh-b" :class="{active: fhIndex == 0}" @click="changeFh(0)">物流发货</view>
						<view class="fh-b" :class="{active: fhIndex == 1}" @click="changeFh(1)">上门自提</view>
					</view>
				</view>
				<view class="flex-between item">
					<text>商品金额</text>
					<view class="">
						<text>￥</text>
						<text class="total">{{infos?.goods_price}}</text>
					</view>
				</view>
				<view class="remarks item">
					<text>订单备注</text>
					<textarea id="" placeholder="请输入备注信息"></textarea>
				</view>
				<view class="item">
					<text>共{{infos?.order_num}}件商品</text>&nbsp;&nbsp;
					<text class="meet">合计 </text>
					<text class="symbol"> ¥</text>
					<text class="amout"> {{infos?.order_amount}}</text>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="left">
				<text>待支付:￥</text>
				<text class="price">{{infos?.order_amount}}</text>
			</view>
			<view class="right">
				<button @click="getOrder">提交订单</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import CustomNavbar from '@/components/CustomNavbar.vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const infos = ref()
	const id = ref(null);
	const address = ref(0) //是否已有地址 0 没有 1有
	const fhIndex = ref(0)
	onLoad((options) => {
		if (options.id) {
			id.value = options.id
		} else {
			infos.value = JSON.parse(uni.getStorageSync('goods_detail'))
			address.value = infos.value.delivery_address ? 1 : 0
			
		}
	})
	const changeFh = (i) => {
		fhIndex.value = i
	}
	onShow(()=>{
		if(!id.value){
			if (uni.getStorageSync('address')) {
				address.value = 1;
				const addr = ref()
				addr.value = JSON.parse(uni.getStorageSync('address'))
				console.log(addr)
				infos.value.delivery_name = addr.value.delivery_name
				infos.value.delivery_phone = addr.value.delivery_phone
				infos.value.delivery_address = addr.value.prov + addr.value.city + addr.value.area + addr.value
					.delivery_addr
			}
		}
	})


	const toAddress = () => {
		const url = ref('')
		if (address.value) {
			url.value = '/addressPages/pages/address/receiving-address?type=1'
		} else {
			url.value = '/addressPages/pages/address/add-address'
		}
		uni.navigateTo({
			url: url.value
		})
	}
	const getData = () => {
		uni.$api.order.orderDetail()
	}
	const getOrder = () => {
		uni.$api.order.createOrder({
			goods_type: infos.value.goods_type,
			receive_type: fhIndex.value,
			goods_id: infos.value.goods_id,
			goods_price: infos.value.goods_price,
			order_num: infos.value.order_num,
			delivery_name: infos.value.delivery_name,
			delivery_phone: infos.value.delivery_phone,
			delivery_address: infos.value.delivery_address
		}).then(res => {
			if (res.code == 200) {
				uni.removeStorageSync('goods_detail')
				uni.navigateTo({
					url: '/orderPages/pages/order/pay-order?order_id=' + res.data.order_id +
						'&price=' + infos.value.order_amount + '&goods_id=' + infos.value.goods_id
				})
			}
		})

	}
</script>

<style lang="scss" scoped>
	.container {

		background: url('/static/index_slices/index_bg.png') no-repeat;
		background-size: 100% auto;
		padding-top: 8rpx;
		padding-bottom: 80rpx;

		/* 导航栏高度 */
		// 信息-地址
		.address-wrapper {
			width: 710rpx;
			height: 200rpx;
			box-sizing: border-box;

			margin: 20rpx;
			padding: 40rpx 42rpx 40rpx 23rpx;
			background: url('/orderPages/static/address_bg.png') no-repeat;
			background-size: 710rpx 200rpx;
			box-sizing: border-box;

			.address_icon {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 37rpx;
					height: 45rpx;

				}

				.p {
					margin-left: 50rpx;
					color: #999;
				}
			}

			.info-address {

				margin-right: 33rpx;
				// background-color: #fff;
				border-radius: 26rpx;

				.info {
					font-size: 30rpx;
					color: #002222;
					font-weight: bold;

					.name {
						color: #101624;
						padding-right: 70rpx;
					}
				}

				.address {
					font-size: 20rpx;
					color: #3D4354;
					margin-top: 30rpx;
				}
			}

			.right {
				image {
					width: 16rpx;
					height: 32rpx;
				}
			}

		}

		// 商品信息
		.goods {
			background-color: #fff;
			border-radius: 16rpx;
			margin: 30rpx 20rpx 20rpx;
			padding: 30rpx;
			font-size: 11rpx;
			color: #999;

			image {
				width: 160rpx;
				border-radius: 10rpx;
				margin-right: 24rpx;
			}

			.goods-detail {

				h4 {
					width: 468rpx;
					font-size: 26rpx;
					color: #000000;
					font-weight: normal;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.num {
					padding-top: 28rpx;
					margin-bottom: 45rpx;
				}

				.price-box {
					font-size: 24rpx;
					color: #DD3A22;
					font-weight: bold;
				}

				.price {
					font-size: 28rpx
				}
			}
		}

		.total-amount {
			background-color: #fff;
			border-radius: 16rpx;
			margin: 20rpx;
			padding: 0 51rpx 0 30rpx;
			text-align: right;
			font-size: 26rpx;
			color: #101624;
			.flex{
				display: flex;
				align-items: center;
				.fh-b{
					padding: 5rpx 15rpx;
					border: solid 1px #ccc;
					border-radius: 30rpx;
					margin-left: 10rpx;
					&.active{
						color: red;
						border-color: red;
					}
				}
			}
			.flex-between {
				border-bottom: 1px solid #EEF3F6;
			}

			.item {
				padding: 40rpx 0 52rpx 0;

			}

			.remarks {
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #EEF3F6;

				textarea {
					max-width: 520rpx;
					font-size: 25rpx
				}
			}

			.total {
				color: #222222;
				font-weight: bold;
				font-size: 28rpx;
			}

			.meet {
				color: #42485A;
			}

			.symbol {
				color: #FF3A3A;
			}

			.amout {
				color: #FF3A3A;
				font-size: 32rpx
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 150rpx;
			color: #fff;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			background-color: #3C3C48;
			font-size: 24rpx;
			padding: 0 30rpx;

			button {
				width: 238rpx;
				height: 78rpx;
				line-height: 78rpx;
				border-radius: 39rpx;
				background: linear-gradient(to right, #FF5A55, #FD3832);
				color: #fff;
				margin-top: 20rpx;
			}

			.left {
				margin-top: 44rpx;
			}

			.price {

				font-size: 28rpx;
			}
		}
	}
</style>